<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="icon" href="../image/yinyue.png">
  <script src="../js/index.js"></script>
  <title>网抑云音乐</title>
  <style></style>
</head>

<body>
  <div class="header">
    <div class="head">
      <h1>
        <a href="#">网抑云音乐</a>
      </h1>
      <ul>
        <li><a href="#">发现音乐</a></li>
        <li><a href="#">我的音乐</a></li>
        <li><a href="#">关注</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">音乐人</a></li>
        <li>
          <a href="#">下载客户端</a>
          <sup class="hot">&nbsp;</sup>
        </li>
      </ul>
      <div class="logbtn"><a href="#">登录</a></div>
      <div class="creater"><a href="#">创作者中心</a></div>
      <div class="input"><input type="text" placeholder="音乐/视频/电台/用户"></div>
    </div>
  </div>
  <!-- 菜单栏 -->
  <div class="menu">
    <div class="center">
      <ul>
        <li><a href="#"><em>推荐</em></a></li>
        <li><a href="#"><em>排行榜</em></a></li>
        <li><a href="#"><em>歌单</em></a></li>
        <li><a href="#"><em>主播电台</em></a></li>
        <li><a href="#"><em>歌手</em></a></li>
        <li><a href="#"><em>新碟上架</em></a></li>
      </ul>
    </div>
  </div>

  <!-- 主体区 -->
  <!-- 轮播图 -->
  <div class="banner-box">
    <!-- 装背景图 -->
    <div class="bg"></div>
    <div class="wrap">
      <!-- 轮播图盒子 -->
      <div class="banner">
        <ul class="pic">
          <li class="pic0"><a href="#"><img src="../image/1.jpg" alt=""></a></li>
          <li class="pic1"><a href="#"><img src="../image/2.jpg" alt=""></a></li>
          <li class="pic2"><a href="#"><img src="../image/3.jpg" alt=""></a></li>
          <li class="pic3"><a href="#"><img src="../image/4.jpg" alt=""></a></li>
          <li class="pic4"><a href="#"><img src="../image/5.jpg" alt=""></a></li>
          <li class="pic5"><a href="#"><img src="../image/6.jpg" alt=""></a></li>
          <li class="pic6"><a href="#"><img src="../image/7.jpg" alt=""></a></li>
          <li class="pic7"><a href="#"><img src="../image/8.jpg" alt=""></a></li>
          <li class="pic8"><a href="#"><img src="../image/9.jpg" alt=""></a></li>
          <li class="pic9"><a href="#"><img src="../image/10.jpg" alt=""></a></li>
        </ul>
        <!-- 底部圆点标识 -->
        <div class="mark">
          <span data-n="0" class="active"></span>
          <span data-n="1"></span>
          <span data-n="2"></span>
          <span data-n="3"></span>
          <span data-n="4"></span>
          <span data-n="5"></span>
          <span data-n="6"></span>
          <span data-n="7"></span>
          <span data-n="8"></span>
          <span data-n="9"></span>
        </div>
        <!-- 左右按钮 -->
        <span><a class="btnl" href="#"></a></span>
        <span><a class="btnr" href="#"></a></span>
      </div>
      <!-- 固定定位下载区域 -->
      <div class="download">
        <div class="downloadbg">
          <a href="#"></a>
        </div>
        <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
      </div>
    </div>
  </div>
  <div class="discover">
    <div class="discoverl">
      <div class="view">
        <!-- 热门推荐 -->
        <div class="reco">
          <div class="reco_top">
            <a href="#">热门推荐</a>
            <div class="tab">
              <a href="#">华语</a>
              <a href="#">流行</a>
              <a href="#">摇滚</a>
              <a href="#">民谣</a>
              <a href="#">电子</a>
            </div>
            <a href="#">更多</a>
          </div>
          <ul class="reco_bot">
            <li>
              <div>
                <a href=""><img src="../image/f1.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>17万</span>
                  <a href="#"></a>
                </div>
                <a href="#">初听不知曲中意，再听已是曲中人</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f3.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>98万</span>
                  <a href="#"></a>
                </div>
                <a href="#">说真的 忘记你我做不到</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f2.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>147万</span>
                  <a href="#"></a>
                </div>
                <a href="#">『别把最爱你的女孩弄丢了』 mung kuylar♡</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f4.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>15万</span>
                  <a href="#"></a>
                </div>
                <a href="#">敷衍是散场的开始</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f6.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>64万</span>
                  <a href="#"></a>
                </div>
                <a href="#">失而复得就是重蹈覆辙.</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f7.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>80万</span>
                  <a href="#"></a>
                </div>
                <a href="#">微醺 慵懒 高级感 [又纯又欲]</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f8.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>35万</span>
                  <a href="#"></a>
                </div>
                <a href="#">所爱隔山海 山海不可平</a>
              </div>
            </li>
            <li>
              <div>
                <a href=""><img src="../image/f5.jpg" alt=""></a>
                <div>
                  <span></span>
                  <span>57万</span>
                  <a href="#"></a>
                </div>
                <a href="#">大概率她根本不会想起你</a>
              </div>
            </li>
          </ul>
        </div>
        <!-- 新碟上架 -->
        <div class="reco">
          <div class="reco_top">
            <a href="#">新碟上架</a>
            <a href="#">更多</a>
          </div>
          <div class="box">
            <span class="btn_l"></span>
            <ul>
              <li>
                <div>
                  <img src="../image/s1.jpg" alt="">
                  <a href="#"></a>
                  <p><a>最后的水族馆</a></p>
                  <p><a>裘德</a></p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../image/s2.jpg" alt="">
                  <a href="#"></a>
                  <p><a>I'M MORE SOBER WHEN I'M DRUNK</a></p>
                  <p><a>韦礼安</a></p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../image/s3.jpg" alt="">
                  <a href="#"></a>
                  <p><a>学友 经典 世界巡回演唱会 台北站 (Live)</a></p>
                  <p><a>张学友</a></p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../image/s4.jpg" alt="">
                  <a href="#"></a>
                  <p><a>异界来客</a></p>
                  <p><a>幼稚园杀手</a></p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../image/s5.jpg" alt="">
                  <a href="#"></a>
                  <p><a>对等关系</a></p>
                  <p><a>李荣浩/张惠妹</a></p>
                </div>
              </li>
            </ul>
            <span class="btn_r"></span>
          </div>
        </div>
        <!-- 榜单 -->
        <div class="reco reco_bd">
          <div class="reco_top">
            <a href="#">榜单</a>
            <a href="#">更多</a>
          </div>
          <div class="bd_box">
            <div class="bd_bs">
              <div class="list_top">
                <img src="../image/bs.jpg" alt="">
                <div>  
                  <h3>飙升榜</h3>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="bs_list">
                <ol>
                  <li>
                    <span>1</span>
                    <a href="#">无法离地的飞行</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>2</span>
                    <a href="#">漠河舞厅·2022</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>3</span>
                    <a href="#">错位时空</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>4</span>
                    <a href="#">Normal No More</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>5</span>
                    <a href="#">ХЛОПАЙ</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>6</span>
                    <a href="#">清醒</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>7</span>
                    <a href="#">True To The Crew</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>8</span>
                    <a href="#">破防</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>9</span>
                    <a href="#">人间剧场</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>10</span>
                    <a href="#">Come Close</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                </ol>
                <div class="more">
                  <a href="#">查看全部></a>
                </div>
              </div>  
            </div>
            <div class="bd_bs">
              <div class="list_top">
                <img src="../image/xg.jpg" alt="">
                <div>  
                  <h3>新歌榜</h3>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="bs_list">
                <ol>
                  <li>
                    <span>1</span>
                    <a href="#">无法离地的飞行</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>2</span>
                    <a href="#">漠河舞厅·2022</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>3</span>
                    <a href="#">错位时空</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>4</span>
                    <a href="#">Normal No More</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>5</span>
                    <a href="#">ХЛОПАЙ</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>6</span>
                    <a href="#">清醒</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>7</span>
                    <a href="#">True To The Crew</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>8</span>
                    <a href="#">破防</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>9</span>
                    <a href="#">人间剧场</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>10</span>
                    <a href="#">Come Close</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                </ol>
                <div class="more">
                  <a href="#">查看全部></a>
                </div>
              </div>  
            </div>
            <div class="bd_bs">
              <div class="list_top">
                <img src="../image/yc.jpg" alt="">
                <div>  
                  <h3>原创榜</h3>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="bs_list">
                <ol>
                  <li>
                    <span>1</span>
                    <a href="#">无法离地的飞行</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>2</span>
                    <a href="#">漠河舞厅·2022</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>3</span>
                    <a href="#">错位时空</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>4</span>
                    <a href="#">Normal No More</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>5</span>
                    <a href="#">ХЛОПАЙ</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>6</span>
                    <a href="#">清醒</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>7</span>
                    <a href="#">True To The Crew</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>8</span>
                    <a href="#">破防</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>9</span>
                    <a href="#">人间剧场</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                  <li>
                    <span>10</span>
                    <a href="#">Come Close</a>
                    <div>
                      <a href="#"></a>
                      <a href="#"></a>
                      <a href="#"></a>
                    </div>
                  </li>
                </ol>
                <div class="more">
                  <a href="#">查看全部></a>
                </div>
              </div>  
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="discoverr">
      <div class="login">
        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
        <a href="">用户登录</a>
      </div>
      <!-- 入驻歌手 -->
      <div class="singer">
        <div>
          <p>入驻歌手</p>
          <span><a href="">查看全部 ></a></span>
        </div>
        <ul>
          <li>
            <a href="#">
              <div>
                <img src="../image/xyt.jpg" alt="">
              </div>
              <div>
                <h4>Fine乐团</h4>
                <p>独立音乐人</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div>
                <img src="../image/wxl.jpg" alt="">
              </div>
              <div>
                <h4>萬曉利</h4>
                <p>民谣歌手、中国现代民谣的代表人物之一</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div>
                <img src="../image/zhm.jpg" alt="">
              </div>
              <div>
                <h4>张惠妹aMEI</h4>
                <p>台湾歌手张惠妹</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div>
                <img src="../image/zl.jpg" alt="">
              </div>
              <div>
                <h4>音乐人赵雷</h4>
                <p>民谣歌手</p>
              </div>
            </a>
          </li>
          <li>
            <a href="#">
              <div>
                <img src="../image/wsb.jpg" alt="">
              </div>
              <div>
                <h4>王三溥</h4>
                <p>音乐人</p>
              </div>
            </a>
          </li>
        </ul>
        <div><a href="">申请成为网易音乐人</a></div>
      </div>
      <!-- 热门主播 -->
      <div class="anchor">
        <div>
          <p>热门主播</p>
        </div>
        <ul>
          <li>
            <a href="#">
              <img src="../image/cl.jpg" alt="">
            </a>
            <div>
              <p><a href="">陈立</a></p>
              <p>心理学家、美食家陈立教授</p>
            </div>
          </li>
          <li>
            <a href="#">
              <img src="../image/lw.jpg" alt="">
            </a>
            <div>
              <p><a href="">刘维-Julius</a></p>
              <p>歌手、播客节目《维维道来》主理人</p>
            </div>
          </li>
          <li>
            <a href="#">
              <img src="../image/mf.jpg" alt="">
            </a>
            <div>
              <p><a href="">莫非定律MoreFeel</a></p>
              <p>男女双人全创作独立乐团</p>
            </div>
          </li>
          <li>
            <a href="#">
              <img src="../image/xmd.jpg" alt="">
            </a>
            <div>
              <p><a href="">碎嘴许美达</a></p>
              <p>脱口秀网络红人</p>
            </div>
          </li>
          <li>
            <a href="#">
              <img src="../image/yl.jpg" alt="">
            </a>
            <div>
              <p><a href="">银临Rachel</a></p>
              <p>古风音乐人</p>
            </div>
          </li>
        </ul>
      </div>  
    </div>
  </div>
  <!-- footer -->
  <div class="footer">
    <div class="foot">
      <div>
        <p>
         <a href="">服务条款</a> <span>|</span> 
         <a href="">隐私政策</a> <span>|</span> 
         <a href="">儿童隐私政策</a> <span>|</span> 
         <a href="">版权投诉指引</a> <span>|</span>
         <a href="">意见反馈</a> <span>|</span>
         <a href="">广告合作</a>
        </p>
        <p>
          <span>网易公司版权所有©1997-2022</span>
          <span>杭州乐读科技有限公司运营：</span>
          <a href="#">浙网文[2021] 1186-054号</a>
        </p>
        <p>
          <span>违法和不良信息举报电话：0571-89853516</span>
          <span>举报邮箱：</span>
          <a href="#">ncm5990@163.com</a>
        </p>
        <p>
          <a href="">粤B2-20090191-18  工业和信息化部备案管理系统网站</a>
          <a href=""><span></span><span>浙公网安备 33010902002564号</span></a>
        </p>
      </div>
      <div>
        <ul>
          <li><a href=""></a><span></span></li>
          <li><a href=""></a><span></span></li>
          <li><a href=""></a><span></span></li>
          <li><a href=""></a><span></span></li>
          <li><a href=""></a><span></span></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- footer结束 -->
  <!-- 回到顶部 -->
  <a class="retop" href="#"></a>
</body>

</html>